import { Form, Input, message, Modal, Radio } from "antd";
import React from "react";
import { isMobile, isEmail } from "@/utils/utils";
import UploadImage from "@/components/UploadImage";

const FormItem = Form.Item;
const { TextArea } = Input;

const formItemLayout = {
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 16 }
  },
  labelCol: {
    xs: { span: 22 },
    sm: { span: 6 }
  }
};

class CreateUpdateForm extends React.Component {
  static defaultProps = {
    zbCompanyResponse: {},
    userDetailResponse: {}
  };

  constructor(props) {
    super(props);
    this.state = {
      fileList: [],
      logoList: [],
    };
  }

  componentDidMount() { }

  // 避免组件重复或者无意义渲染
  componentWillReceiveProps(nextProps) {
    if (JSON.stringify(nextProps) == JSON.stringify(this.props)) return;
    this.freezeUrls(nextProps);
  }

  freezeUrls = nextProps => {
    const urls = nextProps.zbCompanyResponse.businessLicenseUrl;
    const logoUrls = nextProps.zbCompanyResponse.logoUrl;

    this.setState({
      fileList: urls ? [{ url: urls, uid: 1 }] : [],
      logoList: logoUrls ? [{ url: logoUrls, uid: 1 }] : [],
    });
  };

  handleOk = () => {
    const {
      form,
      onSubmit,
      zbCompanyResponse,
      userDetailResponse
    } = this.props;
    const { fileList, logoList } = this.state;
    const businessLicenseUrl =
      fileList.length > 0
        ? Array.isArray(fileList)
          ? fileList[0].url
          : fileList
        : "";
    const logoUrl = logoList.length > 0
      ? Array.isArray(logoList)
        ? logoList[0].url
        : logoList
      : "";
    if (!businessLicenseUrl) return
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      const params = {
        contactName: fieldsValue.userDetailResponse.name,
        contactPhone: fieldsValue.userDetailResponse.mobile,
        id: zbCompanyResponse.id,
        businessLicenseUrl,
        logoUrl,
        description: fieldsValue.zbCompanyResponse.description,
        recommend: fieldsValue.zbCompanyResponse.recommend,
        name: fieldsValue.zbCompanyResponse.name,
        emailAddress: fieldsValue.zbCompanyResponse.emailAddress
      };
      onSubmit(params);
    });
  };

  handleVoucherChange = (info, state) => {
    const list = Array.isArray(info) ? info : info.fileList;
    if (Object.keys(list).length > 0 && list[0].status == "done") {
      const urls = list[0].response.url;
      const list2 = [{ url: urls, uid: 1 }];
      this.setState({ [state]: list2 });
    } else {
      this.setState({ [state]: list });
    }
  };

  render() {
    const {
      modalVisible,
      form,
      onCancel,
      zbCompanyResponse,
      userDetailResponse
    } = this.props;
    const { fileList, logoList } = this.state;
    return (
      <Modal
        destroyOnClose
        title="企业用户"
        visible={modalVisible}
        onOk={this.handleOk}
        onCancel={() => onCancel()}
        cancelText="取消"
        okText="确认"
      >
        <FormItem label="公司名称" {...formItemLayout}>
          {form.getFieldDecorator("zbCompanyResponse.name", {
            rules: [{ required: true, message: "请输入公司名称" }],
            initialValue: zbCompanyResponse.name
          })(
            <Input
              allowClear
              placeholder="请输入公司名称"
              maxLength={20}
              disabled={Object.keys(zbCompanyResponse).length > 0}
            />
          )}
        </FormItem>

        <FormItem label="联系人手机号" {...formItemLayout}>
          {form.getFieldDecorator("userDetailResponse.mobile", {
            rules: [
              {
                required: true,
                message: "请输入正确手机号码",
                pattern: isMobile
              }
            ],
            initialValue: userDetailResponse.mobile
          })(
            <Input allowClear placeholder="请输入联系人手机号" maxLength={11} />
          )}
        </FormItem>

        <FormItem label="联系人姓名" {...formItemLayout}>
          {form.getFieldDecorator("userDetailResponse.name", {
            rules: [{ required: true, message: "请输入联系人姓名" }],
            initialValue: userDetailResponse.name
          })(
            <Input allowClear placeholder="请输入联系人姓名" maxLength={10} />
          )}
        </FormItem>

        <FormItem label="邮箱" {...formItemLayout}>
          {form.getFieldDecorator("zbCompanyResponse.emailAddress", {
            rules: [
              { required: true, message: "请填写正确邮箱", pattern: isEmail }
            ],
            initialValue: zbCompanyResponse.emailAddress
          })(<Input allowClear placeholder="请输入邮箱" />)}
        </FormItem>

        <Form.Item label="营业执照" {...formItemLayout}>
          <UploadImage
            showUploadBtn={fileList.length < 1}
            fileList={fileList}
            onChange={(info) => this.handleVoucherChange(info, 'fileList')}
          />
          {fileList.length < 1 && (
            <span style={{ color: "red" }}>请上传营业执照</span>
          )}
        </Form.Item>

        <Form.Item label="LOGO" {...formItemLayout}>
          <UploadImage
            showUploadBtn={logoList.length < 1}
            fileList={logoList}
            onChange={info => this.handleVoucherChange(info, 'logoList')}
          />
        </Form.Item>

        <FormItem label="企业介绍" {...formItemLayout}>
          {form.getFieldDecorator("zbCompanyResponse.description", {
            initialValue: zbCompanyResponse.description
          })(<TextArea allowClear autoSize={{ minRows: 3, maxRows: 5 }} />)}
        </FormItem>

        <FormItem label="是否为推荐企业" {...formItemLayout}>
          {form.getFieldDecorator("zbCompanyResponse.recommend", {
            initialValue: zbCompanyResponse.recommend
          })(
            <Radio.Group>
              <Radio value={true}>是</Radio>
              <Radio value={false}>否</Radio>
            </Radio.Group>
          )}
        </FormItem>
      </Modal>
    );
  }
}

export default Form.create()(CreateUpdateForm);
